<script setup>
import {onMounted, ref} from "vue";
import {httpGet} from "@/utils/http";
import {ElMessage} from "element-plus";
import {dateFormat} from "@/utils/libs";
// 用户登录日志
const items = ref([])
const loading = ref(true)
const total = ref(0)
const page = ref(0)
const pageSize = ref(0)

onMounted(() => {
  fetchData(1, 15)
})

const fetchData = (_page, _pageSize) => {
  loading.value = true
  httpGet(`api/admin/user/login_log?page=${_page}&pageSize=${_pageSize}`).then(res => {
    if (res.data) {
      items.value = res.data.items
      total.value = res.data.total
      page.value = res.data.page
      pageSize.value = res.data.page_size
    }
    loading.value = false
  }).catch(e => {
    ElMessage.error('获取数据失败：' + e.message)
  })
}

</script>

<template>
  <div class="container list" v-loading="loading">
    <el-row>
      <el-table :data="items" border :row-key="row => row.id">
        <el-table-column label="用户名" prop="username"/>
        <el-table-column label="登录IP" prop="login_ip"/>
        <el-table-column label="登录地址" prop="login_address"/>
        <el-table-column label="登录时间">
          <template #default="scope">
            <span>{{ dateFormat(scope.row['created_at']) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <div class="pagination">
      <el-pagination v-if="total > 0" background
                     layout="total,prev, pager, next"
                     v-model:current-page="page"
                     v-model:page-size="pageSize"
                     @current-change="fetchData(page, pageSize)"
                     :total="total"/>

    </div>
  </div>
</template>

<style scoped lang="stylus">
.list {

  .handle-box {
    margin-bottom 20px
  }

  .el-select {
    width: 100%
  }

  .pagination {
    margin-top 20px
    display flex
    justify-content center
  }

}
</style>